import React, { Fragment, PureComponent } from 'react'
// import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Modal, Row, Col, Card, Button, Skeleton, Avatar, Badge, Form } from 'antd'
import ModalForm from '../components/ModalForm'
// import styles from "../index.less"
const { Meta } = Card;

@connect(({ loading, dispatch, app }) => ({
  app,
  reloading: loading.effects['app/searchOrganizTree'],
  editloading: loading.effects['app/editOrganizTree'],
}))
@Form.create()
class OrganizaInfo extends PureComponent {
  state = {
    visiable: false
  }

  componentDidMount() {
  }

  editOrganization = () => {
    this.setState({
      visiable: true
    })
  }
  handleOk = (e) => {
    e.preventDefault();
    const {
      form: { validateFields, resetFields },
      app: { singleOriginal, urlParams }, editloading, dispatch,
    } = this.props
    validateFields((error, value) => {
      if (error) return
      value.open = value.open ? 0 : 1
      value.orgState = value.orgState ? 0 : 1
      new Promise((resolve) => {
        dispatch({
          type: 'app/editOrganizTree',
          payload: {
            resolve,
            ...value,
            id: singleOriginal.id,
            // topId: singleOriginal.topId,
            // parentId: singleOriginal.id === 0 ? 1 : singleOriginal.id
          }
        })
      }).then((code) => {
        if (code === 1) {
          this.setState({ visiable: false })
          dispatch({
            type: 'app/searchOrganizTree',
            payload: {
              orgId: singleOriginal.id
            }
          })
          dispatch({
            type: 'app/getOrganizTree',
            payload: {
              orgId: urlParams
            }
          })
        }
      })
      resetFields();
    })
  }
  handleCancel = () => {
    this.setState({
      visiable: false
    })
  }


  render() {
    const { visiable } = this.state;
    const { reloading, editloading, app: { singleOriginal, imgUrlList }, form } = this.props;
    // console.log(`singleOriginal-------->`, singleOriginal)
    return (
      <Fragment>
        <Card
          className="organiza-info"
          style={{ marginTop: 16 }}
          type="inner"
          title="组织信息"
          extra={<a onClick={this.editOrganization}>编辑</a>}>
          <Skeleton avatar active loading={!!reloading}>{/* --------reloading--------- */}
            <Meta
              avatar={<Avatar shape="square" size="large" src={imgUrlList && imgUrlList[0].downloadUrl} />}//"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              description={<Row>
                <Col span={24}><span>组织名称：</span>{singleOriginal.name || "公司名称"}</Col>
                <Col span={24}><span>组织说明：</span>{singleOriginal.orgDescribe || "暂无说明"}</Col>
                <Row>
                  <Col span={12}><Badge status={singleOriginal.isOpen === 0 ? "success" : "default"} />公开让用户或公司加入</Col>
                  <Col span={12}><Badge status={singleOriginal.orgState === 0 ? "success" : "default"} />启用此组织</Col>
                </Row>
              </Row>}
            />
          </Skeleton>
        </Card>
        <Modal
          title={<span>
            编辑 <span style={{ color: '#067dc6' }}>{singleOriginal.name}</span> 信息
          </span>}
          visible={visiable}
          onOk={this.handleOk}
          confirmLoading={editloading}
          onCancel={this.handleCancel}
        >
          <ModalForm form={form} modalType="edit" />
        </Modal>
      </Fragment>
    )
  }
}


export default OrganizaInfo;
